<template>
    <div class="header-class">
        <!-- 最上面的两按钮 -->
        <div class="button-group-container">
            <div class="button-group">
                <el-button class="april-boy-btn"  plain size="default" >36k小说</el-button>
                <el-button class="april-girl-btn"    plain size="default" >四月天女生</el-button>
            </div>
        </div>
        <div class="header-class-main">
            <div class="header-class-main-box">
                <!-- 图片 -->
                <el-image class="header-class-main-img" src="https://p1.ssl.qhmsg.com/dr/270_500_/t0141eb943e203afa64.jpg" alt=""></el-image>
                <!-- 搜索框 -->
                <div class="search-container">
                    <el-input placeholder="风鬼传说"
                              v-model="searchQuery"
                              style="margin-left: 60px;height: 40px;width: 400px"
                              @keyup.enter="handleSearch()" clearable></el-input>
                    <el-button class="search-btn" plain size="large" type="primary"
                               @click="handleSearch()">搜索</el-button>
                </div>
                <div v-show="adminStatus&&token!==null">
                    <el-button class="admin-btn" plain size="default" @click="router.push('/admin')">管理员</el-button>
                </div>
                <div class="login-class">
                    <div v-if="token==null">
                        <el-icon color="#409eff"><UserFilled /></el-icon>
                        <span style="margin: 0 5px" @click="Login()">登录</span>
                        <span style="margin: 0 5px">|</span>
                        <span style="margin: 0 5px"@click="Register()" >注册</span>
                    </div>
                    <!-- 用户信息下拉框部分 -->
                    <div v-else>
                        <el-dropdown trigger="click" @command="handleDropdownCommand">
                            <div style="display: flex; align-items: center; cursor: pointer;">
                                <el-avatar
                                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                                    style="vertical-align: middle; margin-right: 5px; width: 23px; height: 23px;"
                                ></el-avatar>
                                <span style="margin: 0 5px">{{ userInfo?.username }}</span>
                                <el-icon style="font-size: 1rem; margin-left: 2px;">
                                    <ArrowDown />
                                </el-icon>
                            </div>
                            <template v-slot:dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                                    <el-dropdown-item command="settings">设置</el-dropdown-item>
                                    <el-dropdown-item command="logout" style="color: #f56c6c;">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                    <el-icon color="#409eff"><Refresh /></el-icon>
                    <div style="margin: 0 5px" @click="router.push('/BookList')">看过</div>
                    <el-icon color="#409eff"><Histogram /></el-icon>
                    <div style="margin: 0 5px" @click="router.push('/BookList')">书架</div>
                    <el-icon color="#409eff"><Message /></el-icon>
                    <div style="margin: 0 5px">消息</div>
                    <el-icon color="#409eff"><Edit /></el-icon>
                    <div style="margin: 0 5px">写书</div>
                    <el-icon color="#409eff"><ShoppingTrolley /></el-icon>
                    <div style="margin: 0 5px">充值</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 蓝色那一块 -->
    <div class="main-class">
        <!-- 移动端菜单按钮 -->
        <el-button
            class="mobile-menu-btn"
            icon="Menu"
            size="small"
            @click="showNav = !showNav"
        ></el-button>

        <div class="header-class-main-box" :class="{ 'show-nav': showNav }">
            <el-button  v-for="(item, index) in data.navList"
                        :key="index"
                        type="primary"
                        class="el-button-class"
                        @click="handleNavClick(item.path)"
                        :class="{ 'is-active': getActivePath  === item.path }">
                {{item.name}}
            </el-button>
            <el-button type="primary"
                       class="el-button-class-1"
                       @click="handleNavClick('/write')"
                       :class="{ 'is-active': getActivePath === '/write' }">我要写书
            </el-button>
        </div>
    </div>
    <!-- 主体 -->
    <div  class="footer-class">
        <div class="button-group-container1">
            <div v-for="(item, index) in data.navList"
                 :key="index"
                 class="footer-class"
            >
            </div>
            <div class="footer-class" >
                <router-view ></router-view> <!-- 子路由视图 -->
            </div>
        </div>
    </div>

</template>
<script setup>
import {computed, reactive, ref} from "vue";
import {useRoute, useRouter} from 'vue-router'
import { ArrowDown} from '@element-plus/icons-vue'  // 仅新增Menu图标导入
import { UserFilled,Refresh,Histogram ,Message,Edit,ShoppingTrolley} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {getAuthInfo, isAdmin as checkAdmin, removeAuthInfo} from "@/utils/authStorage.js";

// 仅新增移动端菜单控制变量
const showNav = ref(false);

// 以下代码完全保留原样
const route = useRoute()
const authInfo = ref(getAuthInfo());
const token = ref(authInfo.value.token);
const userInfo = ref(authInfo.value.userInfo);
const routerInstance = useRouter()
const data=reactive({
    navList : [
        { name: '首页', path: '/index' },
        { name: '书架', path: '/BookList' },
        { name: '武侠', path: '/WuXia' },
        { name: '都市', path: '/DouShi' },
        { name: '科幻', path: '/KeHuang' },
        { name: '历史', path: '/LiShi' },
        { name: '言情', path: '/YanQin' },
        { name: '网游', path: '/WangYou' },
        { name: '玄幻', path: '/XuanHuan' },
        { name: '完本', path: '/Complete' },
    ]
})
const searchQuery = ref('')

/**
 * 处理搜索功能
 * 
 * 当用户在搜索框输入关键字并点击搜索按钮或按回车键时执行搜索操作
 * 如果搜索关键字为空则提示用户输入内容
 * 否则跳转到搜索结果页面并携带搜索关键字作为查询参数
 */
const handleSearch = () => {
    if (!searchQuery.value.trim()) {
        searchQuery.value='风鬼传说'
    }
    routerInstance.push({
        path: '/search-results',
        query: { keyword: searchQuery.value }
    })
}

const getActivePath = computed(() => {
    if (route.path === '/write') return '/write'
    const matched = data.navList.find(item => item.path === route.path)
    return matched ? matched.path : data.navList[0].path
})

// 仅新增导航点击时关闭菜单的逻辑
const handleNavClick = (path) => {
    router.push(path)
    showNav.value = false;  // 新增这一行
}

const adminStatus = computed(() => {
    const result = checkAdmin();
    return result;
});

const handleDropdownCommand = (command) => {
    switch(command) {
        case 'profile':
            break;
        case 'settings':
            break;
        case 'logout':
            handleLogout();
            break;
    }
}

const handleLogout = () => {
    removeAuthInfo();
    token.value = null;
    userInfo.value = null;
    ElMessage.success('退出登录成功');
    router.push('/login');
}
const Login = () => {
    router.push({ path: '/login' })
}
const Register = () => {
    router.push({ path: '/register' })
}
</script>
<style scoped>
/* 原有样式完全保留 */
.header-class{
    padding: 0px;
    height: 128px;
}
.button-group{
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
}
.button-group-container{
    background-color: #dee2e6;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 0;
}
.april-boy-btn{
    color: black;
    height: 100%;
}
.april-boy-btn:hover {
    background-color: #ffffff;
    color: black;
    border-color: #ffffff;
}
.april-girl-btn{
    color: black;
    margin-left: 0px;
    background-color: #dee2e6;
}
.april-girl-btn:hover {
    background-color: #ffffff;
    color: black;
    border-color: #ffffff;
}
.header-class-main{
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}
.header-class-main-box{
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    gap: 0px;
}
.header-class-main-img{
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100px;
    height: 70px;
}
.search-container{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 200px;
}
.search-btn{
    height: 40px;
    color: white;
    white-space: nowrap;
    background-color: #409eff;
}
.login-class{
    margin-left: 10px;
    display: flex;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}
.main-class{
    background-color:  #409eff;
    height: 70px;
    position: relative;  /* 仅新增这一行用于菜单按钮定位 */
}
.el-button-class{
    padding: 0px;
    height: 70px;
    width: 135px;
    background-color: transparent;
    margin: 0;
}
.el-button-class:hover {
    background-color: #c6dffc;
    color:  white;
    border-color: #ffffff;
}
.is-active {
    background-color: #78b4ff !important;
    color: white !important;
    border-color: #ffffff !important;
}
.el-button-class-1{
    padding: 0px;
    height: 70px;
    width: 135px;
    background-color: #c6dffc;
    margin: 0;
}
.el-button-class-1:hover {
    background-color: #c6dffc;
    color:  white;
    border-color: #ffffff;
}
/*在这里改   todo*/
.footer-class{
    max-height: 1600px;
    background-color: white;
}
.button-group-container1{
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    flex-direction: column;
}

/* 仅新增移动端适配样式 */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
        position: absolute;
        left: 10px;
        top: 15px;
        background-color: rgba(255,255,255,0.3);
        color: white;
    }
    .main-class .header-class-main-box {
        flex-direction: column;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.3s;
    }
    .main-class .show-nav {
        max-height: 500px;
        padding: 10px 0;
    }
    .header-class-main-box {
        flex-wrap: wrap;
        padding: 0 10px;
    }
    .search-container .el-input {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .login-class {
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 10px;
    }
}

/* 大屏设备隐藏菜单按钮 */
@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none;
    }
}
</style>